<template>
	<view class="qrcode">
		<scanQrCode v-if="scanFlag" @qrCode="qrCode" />
		<view class="main" v-else>
			<animated />
			<u-navbar leftText="返回" title="产品溯源" :bgColor="bgColor" :titleStyle="titleStyle" leftIconColor="#FFF"
				:autoBack="true" :placeholder="true">
			</u-navbar>
			<view class="pdfBody">
				<pdf :flag="flag" />
			</view>
		</view>
	</view>
</template>

<script>
	import scanQrCode from '@/components/scanQrCode/scanQrCode.vue' //引入
	import animated from '@/components/animated/animated.vue'
	export default {
		components: {
			scanQrCode,
			animated
		},
		data() {
			return {
				bgColor: '#FF6601',
				titleStyle: {
					color: '#FFF'
				},
				scanFlag: true,
			};
		},
		onLoad() {
			// uni.request({
			// 	url: `https://dev.fxnws.com/api/instructions?id=1`,
			// 	success: (res) => {
			// 		console.log(res.data.data.pdf);
			// 		uni.navigateTo({
			// 			url: `/pages/preview_pdf/preview_pdf?pdfUrl=${res.data.data.pdf}&flag=1`,
			// 		})
			// 	}
			// });
		},
		methods: {
			goIndex() {
				uni.showToast({
					icon: 'error',
					title: '加载失败！',
					duration: 1500
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 1600)
			},
			qrCode(code) {
				console.log('qrCode =>', code)
				uni.showLoading({
					title: '正在加载...'
				})
				uni.request({
					url: `https://dev.fxnws.com/api/instructions?id=${code}`,
					success: (res) => {
						console.log(res.data.data.pdf);
						uni.hideLoading()
						uni.reLaunch({
							url: `/pages/preview_pdf/preview_pdf?pdfUrl=${res.data.data.pdf}&flag=1`,
						})
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.qrcode {
		width: 100vw;
		height: 100vh;

		.main {
			position: relative;
			z-index: 0;
			width: 100%;
			height: 100%;

			.card {
				width: calc(100% - 30px);
				margin: 20px 15px;
				border-radius: 8px;
				background-color: #FFF;

				.steps {
					width: calc(100% - 30px);
					padding: 10px 15px;
				}
			}
		}
	}
</style>